<template>
  <nav class="navbar">
    <span>会议室预约系统 - 客户</span>
    <div class="nav-links">
      <!-- <router-link to="/client/dashboard">仪表盘</router-link>
      <router-link to="/client/book">预订会议室</router-link>
      <router-link to="/client/bookings">我的预订</router-link>
      <router-link to="/client/profile">个人资料</router-link> -->
      <button @click="logoutHandler" class="logout-button">退出登录</button>
    </div>
  </nav>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';

const router = useRouter();
const userStore = useUserStore();

const logoutHandler = () => {
  userStore.logout();
  router.push({ name: 'Login' });
};
</script>
<style scoped>
.navbar { background: #1976d2; color: #fff; padding: 1rem; display: flex; justify-content: space-between; align-items: center; }
.nav-links a { color: #fff; margin-left: 1rem; text-decoration: none; }
.nav-links a:hover { text-decoration: underline; }
.logout-button {
  background: none;
  border: none;
  color: #fff;
  margin-left: 1rem;
  cursor: pointer;
  font-size: 1rem;
  padding: 0; /* Remove default button padding */
}
.logout-button:hover {
  text-decoration: underline;
}
</style>
